<template>
	<div class="foot_goods table-theme">
		<head-title title="运营--活动足迹"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<div class="type-view" style="margin-right:10px">
						<el-select v-model="where" filterable  placeholder="请选择" @change="init(page)">
							<el-option v-for="item in whereList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
					<select-view
						:option-list="groupOptions"
						:value="is_group"
						type="is_group"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="optionList" :selectContents="selectContent" :classSelects="classSelect" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>

			<p class="data-number">总足迹数：{{ total }}</p>
			<el-table :data="userBrowseList" stripe>
				<el-table-column label="用户序号" align="center" prop="user_id"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<el-image :src="scope.row.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="角色" align="center" prop="role_name"></el-table-column>
				<!-- <el-table-column label="C/B端" align="center" prop="client" width="180"></el-table-column>
				<el-table-column label="归属商家ID" align="center" prop="store_id"></el-table-column> -->
				<el-table-column label="店铺名字" align="center" prop="store_name"></el-table-column>
				<el-table-column label="店铺ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="业绩员" align="center" prop="service_name"></el-table-column>
				<el-table-column label="招商员" align="center" prop="attract_name"></el-table-column>
				<el-table-column label="推荐人ID" align="center" prop="parent_id"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="动作" align="center" prop="where"></el-table-column>
				<el-table-column label="浏览次数" align="center" prop="num"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goFootDetails(scope.row.user_id)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"
				 :page-size="30"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				groupOptions: [{
					value: 0,
					label: '无分组'
				}, {
					value: 1,
					label: '按人分组'
				},{
					value:2,
					label:'商家分组'
				}],
				is_group: 0,
				optionList: [{
						value: 0,
						label: '用户ID'
					},
					{
						value: 1,
						label: '推荐人'
					},
					{
						value:2,
						label:"动作搜索"
					},
					{
						value:3,
						label:"商品ID"
					},
					{
						value:4,
						label:'店铺ID'
					}
				],
				selectContent: '', // 分类搜索平输入框的值
				selectText: '',
				classSelect: 1, // 分类搜索
				userBrowseList: [], // 浏览记录列表
				total: 0,
				totalData: 0,
				where: '所有足迹',
				windex: 0,
				page: 0,
				whereList: []
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 30,
					where: this.where == '所有足迹' ? '' : this.where,
					is_group:this.is_group == 0 ? '':this.is_group,
				};

				if (this.classSelect == 0) {
					data.user_id = this.selectContent;
				} else if (this.classSelect == 1) {
					data.parent_id = this.selectContent;
				}else if(this.classSelect == 2){
					data.where = this.selectContent;
					data.is_group = ''
				}else if(this.classSelect == 3){
					data.goods_id = this.selectContent;
				}else if(this.classSelect == 4){
					data.store_id = this.selectContent;
				}

				if (this.type == 0) {
					delete data.type;
				}

				this.$http(this.$ApiList.ActivityBrowseList, data).then(res => {
					this.userBrowseList = res.datas.data
					this.total = res.datas.count;
				});
			},
			// 搜素
			goSearch(type, value) {
				this.selectContent = value;
				this.classSelect = type;
				this.init();
			},
			goFootDetails(id) {
				this.$router.push({
					path: '/foot_details',
					query: {
						id: id
					}
				});
			},
			refreshPage() {
				this.page = 1;
				this.type = 0;
				this.selectText = '';
				this.selectContent = '';
				this.classSelect = 1;
				this.init()
			},
			getWhere() {
				this.$http(this.$ApiList.GetWhere).then(res => {
					this.whereList = res.datas
					this.whereList.unshift('所有足迹');
				});
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'is_group':
						this.is_group = value
						break;
				
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			if(this.$route.query.store_id){
				this.is_group = 1;
				this.selectContent = this.$route.query.store_id;
				this.classSelect = 4;
			}
			this.init();
			this.getWhere()
		}
	};
</script>
<style lang="scss" scoped>

</style>
